<template>
  <uni-list :border="false" class="list">
    <uni-list-item
      class="list-item"
      v-for="item in listArray"
      :key="item.patientId"
      :title="item.patientName"
      :note="item.departName"
      thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
      thumb-size="lg"
      clickable
    >
      <template #footer>
        <view class="footer-right">
          <text class="right-top">{{ item.gradeName }}</text>
          <button
            class="right-btn"
            size="mini"
            style="background-color: orange; border: none; color: #fff"
            @click.stop="toDetail(item)"
          >
            监测
          </button>
        </view>
      </template>
    </uni-list-item>
  </uni-list>
</template>

<script setup>
defineProps({
  listArray: Array,
})
const toDetail = (event) => {
  uni.navigateTo({
    url: `/pagesMember/detail/detail?param=${encodeURIComponent(JSON.stringify(event))}`,
  })
}
</script>
<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style>
::v-deep .uni-list {
  margin-top: 20rpx;
  background-color: transparent !important;
}
::v-deep .list .list-item {
  width: 96% !important;
  margin: auto !important;
  border-radius: 16rpx !important;
  margin-bottom: 20rpx !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0rpx 0rpx 0rpx 0rpx !important;
}
::v-deep .list-item .uni-list-item {
  border-radius: 16rpx !important;
}
::v-deep .list .uni-list--border::after {
  background-color: transparent !important;
}
::v-deep .list .uni-list-item__icon-img {
  border-radius: 50% !important;
}
::v-deep .list .uni-list-item__content-title {
  font-size: 30rpx !important;
  font-weight: 600;
}
</style>
<style scoped lang="scss">
.list {
  margin-top: 20rpx;
  .footer-right {
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    .right-top {
      font-weight: 600;
    }
    .right-btn {
      margin-top: 6rpx;
      color: #b3b3b3;
    }
  }
}
.list-item {
  /* #ifndef H5 */
  width: 96%;
  margin: auto;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: rgba(0, 0, 0, 0.1) 0rpx 0rpx 0rpx 0rpx;
  /* #endif*/
}
</style>
